<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  const addressList = ref([])
  async function getAddress() {
    const res = await http.request({
      url: '/api/address/myAddress',
      method: 'POST',
      data: {},
    })
    addressList.value = res.data
  }
  //删除地址
  const delpopup = ref()
  const currentId = ref()
  function goDel(id) {
    if (addressList.value.length == 1) {
      uni.utils.toast('必须保留一个地址')
      return
    }
    delpopup.value.open('center')
    currentId.value = id
  }
  async function delAddress() {
    const res = await http.request({
      url: '/api/address/delAddress',
      method: 'POST',
      data: { id: currentId.value },
    })
    if (res.st == 1) {
      getAddress()
    } else {
      uni.utils.toast(res.msg)
    }
    delpopup.value.close('center')
  }
  function cancelDel() {
    delpopup.value.close('center')
  }

  // 编辑新增地址
  function gotoNew() {
    uni.navigateTo({
      url: `/minePage/editaddress/index`,
    })
  }

  function goEdite(item) {
    uni.navigateTo({
      url: `/minePage/editaddress/index?info=${encodeURIComponent(
        JSON.stringify(item)
      )}`,
    })
  }

  onShow(() => {
    getAddress()
  })
</script>

<template>
  <view class="page">
    <view class="" v-if="addressList.length">
      <!-- //列表 -->
      <view class="address-list" v-for="item in addressList" :key="item.id">
        <!-- 左边 -->
        <view class="item-address">
          <view class="item-class1">{{
            item.province + item.city + item.area
          }}</view>
          <view class="item-class2">{{ item.address }}</view>
          <view class="item-name">
            <view class="tt1">{{ item.name }}</view>
            <view class="tt2">{{ item.mobile }}</view>
            <view class="tt3" v-if="item.is_mr == 1">默认</view>
          </view>
        </view>
        <!-- 右边 -->
        <view class="icon-add">
          <view class="icon-change" @click="goEdite(item)">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/mine/address-change.png"
              style="width: 34rpx; height: 34rpx"
            ></image>
          </view>
          <view class="icon-delete" @click="goDel(item.id)">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/mine/address-delete.png"
              style="width: 34rpx; height: 34rpx"
            ></image>
          </view>
        </view>
      </view>
      <!-- //新增按钮 -->
      <view class="item-button" @click="gotoNew()">新增地址</view>
    </view>

    <!-- 缺省 -->
    <view
      class=""
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 200rpx;
      "
      v-else
    >
      <image
        src="https://ojqn.wm2177.com/wechat_imgs/address-null.png"
        style="width: 378rpx; height: 258rpx"
        mode=""
      ></image>
      <view
        class=""
        style="font-size: 26rpx; color: #cacaca; line-height: 62rpx"
      >
        您还没有收货地址哟～
      </view>
      <view
        class=""
        style="
          width: 436rpx;
          height: 96rpx;
          margin-top: 35rpx;
          border-radius: 48rpx;
          background-color: #ffe60f;
          font-size: 32rpx;
          color: #3d3d3d;
          font-weight: 600;
          line-height: 96rpx;
          text-align: center;
        "
        @click="gotoNew()"
      >
        新增收货地址
      </view>
    </view>

    <!-- 删除弹出层 -->
    <uni-popup ref="delpopup" type="center">
      <view class="delpopup-content">
        <view class="delpopup-title"> 提示 </view>
        <view class="delpopup-content-tow"> 确认要删除当前地址？ </view>
        <view class="delpopup-button">
          <view class="" @click="cancelDel"> 取消 </view>
          <view class="" @click="delAddress"> 确定删除 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .page {
    height: 100vh;
    padding: 22rpx;
    box-sizing: border-box;
    background-color: #f4f4f4;
  }
  .address-list {
    display: flex;
    height: 160rpx;
    background: #fff;
    padding: 22rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    &:last-child {
      margin-bottom: 200rpx;
    }
  }
  .item-address {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    width: 95%;
  }
  .item-class1,
  .item-class2 {
    width: 90%;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 26rpx;
    color: #b1b0b8;
  }
  .item-class2 {
    font-size: 30rpx;
    color: #3d3d3d;
  }
  .item-name {
    align-items: center;
    display: flex;
    flex-direction: row;
    font-family: OPPOSans;
    font-weight: 500;
    color: #3d3d3d;
  }
  .tt1 {
    font-size: 26rpx;
    margin-right: 60rpx;
  }
  .tt2 {
    color: #9b9b9d;
    font-size: 24rpx;
    margin-right: 60rpx;
  }
  .tt3 {
    font-size: 20rpx;
    background-color: $all-color;
    border-radius: 6rpx;
    color: #3d3d3d;
    line-height: 34rpx;
    width: 80rpx;
    text-align: center;
  }
  .icon-add {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .item-button {
    width: 90%;
    height: 90rpx;
    background-color: $all-color;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 100rpx;
    color: #3d3d3d;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rpx;
    position: fixed;
    font-family: OPPOSans;
    font-weight: 600;
  }
  .delpopup-content {
    width: 600rpx;
    height: 356rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;
    .delpopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
    }
    .delpopup-content-tow {
      height: 116rpx;
      line-height: 116rpx;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }
    .delpopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        line-height: 80rpx;
        color: #fff;
        &:first-child {
          border: 2rpx solid $all-color;
          background-color: #fff;
          color: $all-color;
        }
      }
    }
  }
</style>
